<template>
  <div class="pane">
    <div v-for="(item,index) in describe" :key="index" class="pane-body" @click="transform(item.src,index)">
      <div class="title" :style="{'color':index===currentIndex?'#5a9cf8':'#303133'}">{{item.title}}</div>
      <div class="desc" :style="{'color':index===currentIndex?'#5a9cf8':'#808081'}">{{item.desc}}</div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
const props = defineProps({
  describe: {
    type: Array,
    default: () => []
  }
})
const currentIndex = ref(0)
const emit = defineEmits(['transform'])

const transform = (src, index) => {
  currentIndex.value = index
  emit('transform', src)
}
</script>

<style lang="scss" scoped>
.pane {
  text-align: left;
  position: absolute;
  top: 135px;
  left: 8px;
  margin: auto;
  z-index: 99999;
  .pane-body {
    &:hover {
      cursor: pointer;
      .title {
        color: #5a9cf8 !important;
      }
      .desc {
        color: #5a9cf8 !important;
      }
    }
    .title {
      font-weight: 600;
      color: #303133;
      font-size: 16px;
      margin: 24px 0 8px;
    }
    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #808081;
    }
  }
}
</style>